<template>
    <Layout>
      <Header style="color:#fff">
          <Row type="flex">
              <i-col>
                  <i-button type="primary" @click="addRole=true" icon="ios-add-circle-outline" >添加角色</i-button>
              </i-col>
          </Row>
      </Header>
      <content>
          <i-table
            border
            stripe
            content='self'
            :columns="columns"
            :data="tableData"
            size="large"
          />
      </content>
      <Modal v-model="addRole" title="添加角色" @on-ok="addOk" @on-cancle="addNotOk" footer-hide>
            <div slot="header" style="fontSize:14px;fontWeight:bold">
               <span>添加角色</span>
            </div>
            <div>
                <Form ref="add" :model="add" :rules="addRules" :label-width="80" >
                    <FormItem label="角色名称" prop="name">
                        <Input v-model="add.name" placeholder="请输入角色名称" style="width:365px"/>
                    </FormItem>
                    <FormItem label="分配权限" prop="authority">
                        <CheckboxGroup v-model="add.authority">
                            <Checkbox v-for='item in authorityList' :key="item.id" :label="item.name"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Form>
            </div>
            <div class="center">
                <Button type="primary" @click="addOk" style="margin-right:40px">确定</Button>
                <Button @click="addNotOk">取消</Button>
            </div>
      </Modal>
      <Modal v-model="contactWorker" title="关联员工" width="750px" @on-ok="connectOk" @on-cancel="connectNotOk">
          <div slot="header" style="fontSize:14px;fontWeight:bold">
               <span>关联员工</span>
         </div>
          <RadioGroup v-model="Type" type="button" @on-change="changeType">
            <Radio label="已关联员工"></Radio>
            <Radio label="未关联员工"></Radio>
        </RadioGroup>
       <!-- <component v-bind:is="which" :id="roleId" :data="connectedData" :page="pageTotal"></component>-->
        <component v-bind:is="which" :id="roleId"></component>
      </Modal>
   
      <Modal v-model="editRole" title="编辑角色信息" footer-hide>
        <div slot="header" style="fontSize:14px;fontWeight:bold">
            <span>编辑角色信息</span>
        </div>
          <div>
              <Form ref="edit" :model="edit" :rules="editRules" :label-width="80">
                  <FormItem label="角色名称" prop="name">
                      <Input v-model="edit.name" placeholder="请输入角色名称" style="width:365px"/>
                  </FormItem>
                  <FormItem label="分配权限" prop="authority">
                      <CheckboxGroup v-model="edit.authority">
                          <Checkbox v-for='item in authorityList' :key="item.id" :label="item.name"></Checkbox>
                      </CheckboxGroup>
                  </FormItem>
              </Form>
          </div>
            <div class="center">
               <Button type="primary" @click="editOk" style="margin-right:40px">确定</Button>
                <Button @click="editNotOk">取消</Button>
            </div>
      </Modal>
      <Modal v-model="deleteRole" title="删除角色" @on-ok="deleteOk">
        <div class="center warningInfo">
          <Icon type="ios-alert" class="warnIcon"/>确定删除该角色吗
        </div>
      </Modal>
    </Layout>
</template>
<script>
export default {
    data(){
        //检查输入的内容是否为空、含有空格或者含有数字
        const validateInput = (rule, value, callback) => {
            const res=this.common.judgeInput(value);
            if(res===-1){
                callback(new Error('输入只能是汉字或英文符号'));
            }else{
                callback();
            }
        };
        return{
            //添加角色的条件判定
            addRules:{
                name:[
                    {required: true, message: '请输入角色名称', trigger: 'blur' },
                    { validator: validateInput, trigger: 'blur'},
                ]
            },
            //编辑角色的条件判断
            editRules:{
                name:[
                    {required: true, message: '请输入角色名称', trigger: 'blur' },
                    { validator: validateInput, trigger: 'blur'},
                ]
            },
            /**row绑定每一行的信息 */
            row:{},
            /** addRole绑定添加角色弹窗*/
            addRole:false,
            /**add下面绑定添加角色的信息 */
            add:{
                name:'',
                /**authority绑定复选框选中的name */
                authority:[],
                  /**add.authorityList绑定要添加的角色具有的权限 ,与add.aauthority不同的是这里是id*/
                authorityList:[],
            }, 
            /**edit下面绑定编辑角色信息 */
            edit:{
                name:'',
                /**不知道为什么复选框没有显示默认勾选 */
                authority:[],
                authoritytest:['承接','审定'],
                authorityList:[],
            },
            /**分别绑定关联员工的弹窗，编辑员工的弹窗，删除员工的弹窗 */ 
            contactWorker:false,
            editRole:false,
            deleteRole:false,
            Type:'已关联员工',
            //type:false,
            roleId:'',
            which:'',
            /**每一行的内容
               *  {
                    "id": 10,
                    "name": "test2",
                    "authorities": [
                        {
                            "id": 1,
                            "name": "承接"
                        },
                        {
                            "id": 2,
                            "name": "编制"
                        },
                        {
                            "id": 3,
                            "name": "审定"
                        }
                    ]
                    },
               * 
               */
            columns:[
                {
                    title:'角色名',
                    key:'name',
                    width:'250px'
                },
                {
                    title:'分配权限',
                    key:'authority',
                    render:(h,params)=>{
                        var authority='';
                        var i=0;
                        for(i=0;i<params.row.authorities.length;i++){
                            authority+=params.row.authorities[i].name+' ';
                        }
                        return h('span',{
                        },authority);
                    }
                },
                { 
                    title:'操作',
                    key:'action',
                    render: (h, params) => {
                            return h('Dropdown',{
                                on:{
                                    "on-click":(name)=>{this.showAction(name,params.row)}
                                },
                                props:{
                                    transfer:true
                                }
                            },[
                                h('Button',{
                                    props:{
                                        type:'primary'
                                    }
                                },'操作'),
                                h('DropdownMenu',{
                                   slot:'list'
                                    },[
                                        h('DropdownItem',{
                                            props:{
                                                name:'contact'
                                            }
                                        },'关联员工'),
                                        h('DropdownItem',{
                                            props:{
                                                name:'edit'
                                            }
                                        },'编辑角色'),
                                        h('DropdownItem',{
                                            props:{
                                                name:'delete'
                                            }
                                        },'删除角色')
                                    ])
            
                            ]);
                        }
                }
            ],
            /**tableData绑定都断传来的所有角色信息和权限信息 */
            tableData:[],
            /**authorityList绑定所有权限信息 */
            authorityList:[],
       
        }
    },
    beforeMount(){
        this.submitGetAll();
        this.submitGetAuthority();
    },
    methods:{
        //判断输入的字符串是否为空或者由空格组成
        judgeBlankSpace(sentence){
            if(sentence===null || sentence.length===0 || sentence.match(/^[ ]*$/)){
                return -1;
            }else{
                return 1;
            }
        },
        /**通过每行的权限，得到其name（实现编辑时候的默认选中） */
        getAuthorityName(authorities,authority){
            var i=0;
            for(i=0;i<authorities.length;i++){
               //authority[i]=authorities[i].name;
               authority.push(authorities[i].name);
            }
        },
        /**通过权限的name得到其id */
        getAuthorityId(authority,authorityList){
            var i=0,j=0,k=0;
            for(i=0;i<authority.length;i++){
                for(j=0;j<this.authorityList.length;j++){
                    if(this.authorityList[j].name==authority[i]){
                        authorityList[k]={"id":this.authorityList[j].id};
                        k++;
                    }
                }
            }
        },
        /**提交获取所有角色信息的请求 */
        submitGetAll(){
            this.apis.roleApis.getRoles(res=>{
                 this.tableData=res.data;
            })
        },
        /**提交获取所有权限的请求 */
        submitGetAuthority(){
            this.apis.roleApis.getAllAuthorities(res=>{
                 this.authorityList=res.data;
            })
        },
        /**用户点击取消添加角色时的回调 */
        addNotOk(){
            this.add.name='';
            this.add.authority=[];
            this.add.authorityList=[];
            this.addRole=false;
        },
        /**用户点击确认添加角色时的回调 */
        addOk(){
            this.$refs['add'].validate((valid) => {
                if (valid) {
                    this.getAuthorityId(this.add.authority,this.add.authorityList);
                    var data={
                        name:this.add.name,
                        authorities:this.add.authorityList
                    }
                    this.apis.roleApis.addRole(data,res=>{
                        var code=res.code;
                        if(code===0){
                            this.$Message.success(res.data);
                        }else{
                            this.$Message.error(res.msg);
                        }
                        this.submitGetAll();
                        this.addRole=false;
                    })
                    this.row={};
                    this.add.name='';
                    this.add.authority=[];
                    this.add.authorityList=[];
                }
            })
        },
        /**用户点击确认删除角色时的回调 */
        deleteOk(){
            this.apis.roleApis.deleteRole(this.row.id,res=>{
                var code=res.code;
                if(code===0){
                    this.$Message.success(res.data);

                }else{
                    this.$Message.error(res.msg);
                }
                this.submitGetAll();
            })
            this.row={};
        },
        editNotOk(){
            this.edit.name='';
            this.edit.authority=[];
            this.edit.authorityList=[];
            this.editRole=false;
        },
        editOk(){
            this.$refs['edit'].validate((valid) => {
                if (valid) {
                    this.getAuthorityId(this.edit.authority,this.edit.authorityList);
                    var data={
                        id:this.row.id,
                        name:this.edit.name,
                        authorities:this.edit.authorityList
                    }
                    this.apis.roleApis.updateRole(data,res=>{
                        var code=res.code;
                        if(code===0){
                            this.$Message.success(res.data);
                        }else{
                            this.$Message.error(res.msg);
                        }
                        this.submitGetAll();
                        this.editRole=false;
                    })
                    this.edit.name='',
                        this.edit.authority=[],
                        this.edit.authorityList=[]
                    this.row={};

                }
            })

        },
        //根据选择不同的操作弹出不同的窗口
        showAction(name,row){
            this.row=row;
            if(name=='contact'){
                this.roleId=this.row.id;
                this.which="contact_yForm";
                this.contactWorker=true;
            }else if(name=='edit'){
                this.edit.name=this.row.name;
                this.getAuthorityName(this.row.authorities,this.edit.authority);
                this.editRole=true;
            }else{
                this.deleteRole=true
            }
        },
        /**将每行的权限转为只有name */
        changeRowToAuthority(){

        },     
        changeType(){
          if(this.which=='contact_yForm'){
              
              this.which='contact_nForm'
          }
          else{
              this.which='contact_yForm'
          }
      },
        connectOk(){
            this.Type="已关联员工";
            this.which='';
        },
        connectNotOk(){
            this.Type="已关联员工";
            this.which='';
        }
    }
}
</script>
<style scoped>
@import "../../../static/global.css"; /*引入公共样式*/
</style>